<li class="ms-Grid-row" aria-label="Information for font class {{class}}">
  <div class="ms-Grid-col ms-sm12 ms-lg5" aria-label="Class name {{class}}">
    <span class="{{class}}">{{class}}</span>
  </div>
  <div class="ms-Grid-col ms-sm12 ms-lg2" aria-label="Class {{class}} uses the font size {{size}}">
    <p class="msfont-size-m">{{size}}</p>
  </div>
  <div class="ms-Grid-col ms-sm12 ms-lg2" aria-label="Class {{class}} uses the font weight {{weight}}">
    <p class="ms-font-size-m">{{weight}}</p>
  </div>
  <div class="ms-Grid-col ms-sm12 ms-lg3" aria-label="Class {{class}} uses the color class {{color}}">
    <p class="ms-font-size-m">{{color}}</p>
  </div>
</li>